
import React, { Component } from 'react';
import { StatusBar, NativeModules, Image, ScrollView, StyleSheet, View, SectionList, TouchableHighlight } from 'react-native';
import { Container, List, ListItem, Button, Text, Header, Body } from 'native-base';

import BaseHeader from '../../Views/BaseHeader'

import Swiper from "react-native-swiper"

let vm = NativeModules.SYHomeVCViewModel

let home_top_path = "/v1/index/home-top";
let home_like_path = "/v1/index/home-like";
let home_bottom_path = "/v1/index/home-bottom";


export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            banners: [],
            likeList: [],
        };
    }

    componentDidMount() {
        this.netFetchHomeTopData();
        this.netFetchHomeLikeData()
        this.props.navigation.setOptions({ headerTransparent: true, title: "" })
    }

   async netFetchHomeLikeData() {
        let result = await Net.get(home_top_path,null)
        let data = result.data;
        this.setState({
            banners: data.banners
        })
    }

    async netFetchHomeTopData() {
        let res = await Net.get(home_like_path,{page:1,pageSize:1000})
        let data = res.data;
        let arr = []
        arr = arr.concat(data.likeList);
        this.setState({
            likeList: arr
        })
    }

    cellClick = (item) => {
        this.props.navigation.push('Goods', { goodsId: item.id })
    }

    renderBannerCell = (obj, index) => {
        let { banners } = this.state
        let arr = []
        banners.map((obj, index) => {
            arr.push(
                <TouchableHighlight activeOpacity={1} onPress={this.bannerClick} underlayColor={'rgba(0,0,0,0)'}>
                    <Image key={index} style={{ width: '100%', borderRadius: 10, height: 260, backgroundColor: "#f5f5f5" }}
                        source={{ uri: obj.banner }}
                        resizeMode='stretch'
                    ></Image>
                </TouchableHighlight>
            )
        })
        return arr
    }

    bannerClick = () => {
    }

    renderBanner = ({ item, index }) => {
        return (
            <Swiper key={index} style={{ height: 260 }} showsButtons={false} autoplay={true}>
                {this.renderBannerCell()}
            </Swiper>
        )
    }

    renderCell = ({ item, index }) => {
        return (
            <TouchableHighlight onPress={this.cellClick.bind(this, item)} underlayColor={"rgba(0,0,0,0)"}>
                <View key={index} style={{ display: 'flex', flexDirection: 'row', paddingTop: 5, paddingBottom: 10, paddingLeft: 12, paddingRight: 12, overflow: 'hidden', }}>
                    <Image
                        source={{ uri: item.thumb }}
                        style={{ height: 160, width: 210, backgroundColor: '#f5f5f5', marginRight: 10 }}
                    />
                    <View style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingTop: 10 }}>
                        <View>
                            <Text style={{ fontSize: 16 }}>{item.title}</Text>
                            <Text style={{ marginTop: 10, fontSize: 12, color: '#999999' }}>{item.subtitle}</Text>
                        </View>
                        <Text style={{ color: '#ff0000' }}>{`￥${item.shop_price}`}</Text>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }

    render() {
        let { likeList } = this.state
        return (
            <Container style={{ flex: 1, backgroundColor: "#F8F8F8", display: 'flex', flexDirection: "column" }}>
                <StatusBar barStyle="light-content"></StatusBar>
                <Header span style={{ backgroundColor: 'red' }}>
                    <Body>
                        <BaseHeader title={'首页'} />
                    </Body>
                </Header>
                <SectionList style={{ flex: 1, padding: 10 }}
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={{ fontWeight: "bold", color: 'red' }}>{title}</Text>
                    )}
                    sections={[
                        { data: ['1'], renderItem: this.renderBanner },
                        { data: likeList, renderItem: this.renderCell },
                    ]}
                    keyExtractor={(item, index) => item + index}
                >
                </SectionList>
            </Container>
        );
    }
}